 <template>
  <div class="login">
    <div class="head">
      <img src="../../assets/logo.png" alt="">
      <h2>TCL账号登录</h2>
    </div>
    <div class="loginMain">
      <div class="loginBox">
        <div class="title">
          账号密码登录
        </div>
        <el-form ref="loginForm" :model="form" :rules="rules">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="用户名" size="large"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="form.password" placeholder="登录密码" size="large"></el-input>
          </el-form-item>
          <el-form-item prop="checkNum" style="margin-bottom:15px">
            <el-input v-model="form.captcheCode" placeholder="验证码" @keyup.enter.native="handleLogin" size="large">
              <img :src="`data:image/png;base64,${captchaImg}`" alt="" slot="append" class="captcha" @click="getCaptcha">
            </el-input>
          </el-form-item>
          <div>
            <el-checkbox v-model="saveUsername" label="记住用户名"></el-checkbox>
            <!-- <a class="epLogin" :href="this.epLoginUrl">企业登录</a> -->
          </div>
          <el-button type="primary" @click="handleLogin" :loading="loading" size="large">登录</el-button>
        </el-form>
      </div>
    </div>
    <g-foot></g-foot>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import gFoot from '@/components/footer/foot'
  import {getCaptcha} from '@/service/getData'
  import env from '@/config/env'
  import menuUrl from '@/router/menuUrl'
  export default{
    data () {
      return {
        form: {
          username: localStorage.getItem('username'),
          password: '',
          captcheCode: '',
          captchaKey: ''
        },
        captchaImg: '',
        rules: {
          username: {required: true, message: '请输入用户名'},
          password: {required: true, message: '请输入密码'}
        },
        saveUsername: !!localStorage.getItem('username'),
        loading: false
      }
    },
    mounted () {
      this.getCaptcha()
    },
    components: {gFoot},
    computed: {
      ...mapState({
        epLoginUrl: state => state.signin.epLoginUrl
      })
    },
    methods: {
      ...mapActions(['signInIdm', 'getEnterpriseUrl']),
      async getCaptcha () {
        const res = await getCaptcha()
        this.captchaImg = res.data.data.base64Image
        this.form.captchaKey = res.data.data.key
      },
      handleLogin: function () {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            !this.saveUsername && localStorage.removeItem('username')
            this.signInIdm(this.form)
              .then(res => {
                if (res.code === 1) {
                  localStorage.setItem('UBToken', res.data.token)
                  this.saveUsername && localStorage.setItem('username', this.form.username)
                  //this.$router.push({name: 'Customers'})
                  this.$router.push(menuUrl[res.data.routerId])
                }
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .login{
    height:100%;background:#fff;
    .head{
      width:1190px;margin:0 auto;height:85px;line-height:85px;
      img{margin:20px 20px 0 0;vertical-align:top;}
      h2{display:inline-block;font-size:32px;font-weight:lighter;color:#666}
    }
    .loginMain{
      position:relative;height:640px;background:url('../../assets/login/back.jpg') no-repeat 50% 50%;
      .loginBox{
        position:absolute;left:50%;top:50px;margin-left:180px;padding:40px 80px 70px 80px;width:322px;background:#fff;
        .title{margin-bottom:20px;font-size:22px;}
        input{font-size:14px;}
        .el-button{width:322px}
        .captcha{display:inline-block;width:70px;height:26px;}
        .epLogin{float:right;font-size:14px;text-decoration:none;color:inherit;}
      }
      .el-checkbox{margin-bottom:10px}
    }
    .footer{
      margin-top:100px;border-top:0;
    }
  }
</style>
